<template>
	<view class="content index-content">
		<TopVue />
		<view class="index-main">
			<YuyingVue />
			<view class="main-mid">
				<view class="mid-btn-big mid-green" @click="jump('/pages/index/qa')">
					<image class="mid-btn-img" src="/static/index-2.png"></image>
					<text class="mid-btn-title">中医辨证</text>
					<image class="mid-btn-tips-img" src="/static/ds.png" mode="widthFix"></image>
				</view>
				<view class="mid-btn-big mid-blue" @click="jump('/pages/index/health')">
					<image class="mid-btn-img" src="/static/index-1.png"></image>
					<text class="mid-btn-title">健康管理</text>
					<text class="mid-btn-tips">详细评估健康状况</text>
				</view>
				<view class="mid-btn-small mid-yellow" @click="jump('/pages/index/propaganda')">
					<image class="mid-btn-small-img" src="/static/index-3.png"></image>
					<text class="mid-btn-title">宣教服务</text>
				</view>
				<view class="mid-btn-small mid-white" @click="jump('/pages/index/goods')">
					<image class="mid-btn-small-img" src="/static/index-4.png"></image>
					<text class="mid-btn-title">大健康产品售卖</text>
				</view>
			</view>
			<view class="main-pro">
				<view class="pro-title">智能诊断指引</view>
				<view class="pro-box">
					<image class="pro-img" src="/static/pro-1.png"></image>
					<text class="iconfont">&#xeb08;</text>
					<image class="pro-img" src="/static/pro-2.png"></image>
					<text class="iconfont">&#xeb08;</text>
					<image class="pro-img" src="/static/pro-3.png"></image>
					<text class="iconfont">&#xeb08;</text>
					<image class="pro-img" src="/static/pro-4.png"></image>
				</view>
			</view>

		</view>
		<image class="index-bottom" src="/static/bottom.png" mode="widthFix"></image>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { format, hideLoading, showLoading, showToast } from '../../common/util/util';
	import TopVue from '@/components/top.vue'
	import YuyingVue from '@/components/Yuying.vue'
	const jump = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	.index-content {

		.index-main {
			background-color: #fff;
			padding: 0 10rpx;
			padding-bottom: 220rpx;
			min-height: calc(100vh - 100rpx);
		}
		.main-mid {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;

			.mid-btn-big,
			.mid-btn-small {
				width: 49%;
				display: inline-block;
				border-radius: 10rpx;
				margin-bottom: 8rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.mid-btn-big {
				padding: 30rpx 0;
			}

			.mid-btn-small {
				padding: 10rpx 0;
			}

			.mid-btn-img {
				width: 180rpx;
				height: 180rpx;
			}

			.mid-btn-tips-img {
				width: 165rpx;
				// height: 26rpx;
			}

			.mid-btn-tips {
				font-size: 26rpx;
				color: #123F88;
			}

			.mid-btn-small-img {
				width: 125rpx;
				height: 100rpx;
			}

			.mid-btn-title {
				font-size: 32rpx;
				color: #1E1E1E;
				margin: 15rpx;
			}

			.mid-green {
				background: linear-gradient(180deg, #73EF8A 0%, #1CE33D 100%);
			}

			.mid-blue {
				background: linear-gradient(180deg, #28C9FD 0%, #4D8FFF 100%);
			}

			.mid-yellow {
				background: linear-gradient(180deg, #FFDF68 0%, #FFB018 100%);
			}

			.mid-white {
				background: linear-gradient(180deg, #2CEEFE 0%, #3E9CFF 100%);
			}
		}

		.main-pro {
			padding: 20rpx 0;

			.pro-title {
				font-weight: 500;
				font-size: 32rpx;
				color: #1E1E1E;
			}

			.pro-box {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.iconfont {
					font-size: 24rpx;
					font-weight: bold;
					color: #D0D0D0;
				}
			}

			.pro-img {
				width: 134rpx;
				height: 118rpx;
			}
		}

		.index-bottom {
			width: 100%;
			display: block;
			position: fixed;
			left:0;
			bottom:0
			
		}
	}
</style>